import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { 
  ArrowLeft, 
  Download, 
  Share2, 
  Edit, 
  Trash2, 
  Eye, 
  Calendar, 
  User, 
  FileText, 
  Image, 
  Video, 
  Music, 
  Archive,
  Tag,
  Clock,
  HardDrive,
  ExternalLink
} from 'lucide-react'
import './ResourceDetail.css'

const ResourceDetail = () => {
  const { id } = useParams()
  const navigate = useNavigate()
  const [resource, setResource] = useState(null)
  const [loading, setLoading] = useState(true)

  // 模拟资源数据 - 与ResourceLibrary保持一致
  const resources = [
    {
      id: 1,
      title: '智汇宝系统架构文档',
      description: '详细的系统架构设计文档，包含前端、后端、数据库等各个模块的设计说明',
      type: 'document',
      format: 'PDF',
      size: '2.5 MB',
      author: '张三',
      createdAt: '2024-01-15',
      lastModified: '2024-01-20',
      version: 'v2.1',
      category: '技术文档',
      language: '中文',
      pages: 45,
      downloads: 156,
      views: 1234,
      tags: ['架构', '技术文档', '系统设计'],
      thumbnail: '/images/thumbnails/architecture.svg',
      content: '本文档详细描述了智汇宝系统的整体架构设计，包括前端采用React技术栈，后端使用Node.js和Express框架，数据库采用MongoDB进行数据存储。系统采用微服务架构，各模块之间通过RESTful API进行通信。前端实现了响应式设计，支持多种设备访问。后端实现了用户认证、权限管理、资源管理等核心功能模块。'
    },
    {
      id: 2,
      title: '产品设计规范',
      description: 'UI/UX设计规范和组件库，包含颜色、字体、间距等设计标准',
      type: 'image',
      format: 'PNG',
      size: '1.2 MB',
      author: '李四',
      createdAt: '2024-01-10',
      lastModified: '2024-01-18',
      version: 'v1.5',
      category: '设计文档',
      language: '中文',
      downloads: 89,
      views: 567,
      tags: ['设计', 'UI', 'UX', '规范'],
      thumbnail: '/images/thumbnails/design.svg',
      content: '智汇宝产品设计规范定义了统一的视觉语言和交互标准。主色调采用深色主题，背景色为#0f172a，主要文字颜色为#e2e8f0。字体使用Inter和苹果系统字体。组件库包含按钮、输入框、卡片、导航栏等常用组件，所有组件都遵循16:9的屏幕比例设计，适配1920x1080分辨率。间距系统采用8px基准网格。'
    },
    {
      id: 3,
      title: '产品演示视频',
      description: '智汇宝平台功能演示，展示核心功能和使用流程',
      type: 'video',
      format: 'MP4',
      size: '45.6 MB',
      author: '王五',
      createdAt: '2024-01-08',
      lastModified: '2024-01-15',
      version: 'v1.0',
      category: '演示视频',
      language: '中文',
      duration: '5分30秒',
      downloads: 234,
      views: 890,
      tags: ['演示', '视频', '教程'],
      thumbnail: '/images/thumbnails/video.svg',
      content: '本视频全面展示了智汇宝平台的核心功能，包括资源库管理、资源导入、资源详情查看、会议创建和会议记录等功能。视频采用实际操作演示的方式，配合语音讲解，帮助用户快速了解平台的使用方法。视频时长5分30秒，分辨率1920x1080，适合在各种设备上播放。'
    },
    {
      id: 4,
      title: '用户手册',
      description: '详细的使用说明文档，包含所有功能的操作指南',
      type: 'document',
      format: 'PDF',
      size: '3.1 MB',
      author: '赵六',
      createdAt: '2024-01-05',
      lastModified: '2024-01-22',
      version: 'v3.0',
      category: '用户文档',
      language: '中文',
      pages: 68,
      downloads: 178,
      views: 456,
      tags: ['手册', '用户', '教程', '指南'],
      thumbnail: '/images/thumbnails/manual.svg',
      content: '智汇宝用户手册提供了详细的功能说明和操作指南。第一章介绍系统概述和登录方法，第二章讲解资源库的使用，包括资源的导入、分类、搜索和下载。第三章介绍会议功能，包括创建会议、录制会议和查看会议记录。第四章说明系统设置和个性化配置。每个功能都配有详细的步骤说明和截图示例。'
    },
    {
      id: 5,
      title: '品牌Logo素材',
      description: '公司品牌标识和图标，包含多种格式和尺寸',
      type: 'image',
      format: 'SVG',
      size: '0.8 MB',
      author: '孙七',
      createdAt: '2024-01-03',
      lastModified: '2024-01-12',
      version: 'v2.0',
      category: '品牌素材',
      language: '通用',
      downloads: 67,
      views: 234,
      tags: ['品牌', 'Logo', '图标', '素材'],
      thumbnail: '/images/thumbnails/logo.svg',
      content: '智汇宝品牌Logo素材包包含完整的品牌视觉识别系统。主Logo采用渐变色设计，从#667eea到#764ba2，象征智慧和创新。素材包包含SVG、PNG、JPG等多种格式，提供不同尺寸和颜色变体，包括彩色版、白色版、黑色版等。所有素材都经过优化，适合在网页、移动应用、印刷品等多种场景使用。'
    },
    {
      id: 6,
      title: '技术培训音频',
      description: '前端开发技术分享，React和现代前端开发实践',
      type: 'audio',
      format: 'MP3',
      size: '12.3 MB',
      author: '周八',
      createdAt: '2024-01-01',
      lastModified: '2024-01-10',
      version: 'v1.0',
      category: '培训资料',
      language: '中文',
      duration: '25分钟',
      downloads: 45,
      views: 123,
      tags: ['培训', '音频', '前端', 'React'],
      thumbnail: '/images/thumbnails/audio.svg',
      content: '本次技术培训分享了React 19的新特性和现代前端开发最佳实践。内容包括React Hooks的深入使用、状态管理方案选择、性能优化技巧、组件设计模式等。讲师结合智汇宝项目的实际开发经验，分享了在实际项目中遇到的问题和解决方案。音频时长25分钟，适合前端开发人员学习参考。'
    },
    {
      id: 7,
      title: '数据库设计文档',
      description: 'MongoDB数据库结构设计和数据模型说明',
      type: 'document',
      format: 'PDF',
      size: '1.8 MB',
      author: '张三',
      createdAt: '2024-01-25',
      lastModified: '2024-01-28',
      version: 'v1.3',
      category: '技术文档',
      language: '中文',
      pages: 32,
      downloads: 92,
      views: 345,
      tags: ['数据库', 'MongoDB', '设计', '技术'],
      thumbnail: '/images/thumbnails/database.svg',
      content: '智汇宝数据库设计文档详细说明了MongoDB数据库的集合结构和数据模型。主要集合包括users（用户）、resources（资源）、meetings（会议）、tags（标签）等。文档描述了每个集合的字段定义、索引设计、关联关系和查询优化策略。采用文档型数据库的优势在于灵活的数据结构和良好的扩展性。'
    },
    {
      id: 8,
      title: 'API接口文档',
      description: 'RESTful API接口规范和使用说明',
      type: 'document',
      format: 'PDF',
      size: '2.2 MB',
      author: '李四',
      createdAt: '2024-01-20',
      lastModified: '2024-01-26',
      version: 'v2.5',
      category: '技术文档',
      language: '中文',
      pages: 56,
      downloads: 134,
      views: 678,
      tags: ['API', '接口', '技术文档', 'RESTful'],
      thumbnail: '/images/thumbnails/api.svg',
      content: 'API接口文档提供了智汇宝平台所有后端接口的详细说明。包括用户认证接口、资源管理接口、会议管理接口等。每个接口都说明了请求方法、URL路径、请求参数、响应格式和错误码。接口遵循RESTful设计规范，使用JWT进行身份认证，支持跨域请求。文档还包含了接口调用示例和常见问题解答。'
    },
    {
      id: 9,
      title: '移动端适配方案',
      description: '响应式设计和移动端适配的技术方案',
      type: 'document',
      format: 'PDF',
      size: '1.5 MB',
      author: '王五',
      createdAt: '2024-01-18',
      lastModified: '2024-01-24',
      version: 'v1.2',
      category: '技术文档',
      language: '中文',
      pages: 28,
      downloads: 76,
      views: 289,
      tags: ['移动端', '响应式', '适配', '前端'],
      thumbnail: '/images/thumbnails/mobile.svg',
      content: '移动端适配方案文档介绍了智汇宝在不同设备上的适配策略。采用rem单位实现可缩放的布局，通过媒体查询适配不同屏幕尺寸。针对5寸16:9屏幕（1920x1080）进行了专门优化，设置了150%的全局缩放。文档还介绍了触摸交互优化、性能优化和兼容性处理等内容。'
    },
    {
      id: 10,
      title: '安全规范文档',
      description: '系统安全设计和数据保护规范',
      type: 'document',
      format: 'PDF',
      size: '2.0 MB',
      author: '赵六',
      createdAt: '2024-01-12',
      lastModified: '2024-01-19',
      version: 'v1.8',
      category: '技术文档',
      language: '中文',
      pages: 41,
      downloads: 108,
      views: 432,
      tags: ['安全', '规范', '数据保护', '技术'],
      thumbnail: '/images/thumbnails/security.svg',
      content: '安全规范文档定义了智汇宝系统的安全设计原则和实施方案。包括用户认证和授权机制、数据加密传输、敏感信息存储、XSS和CSRF防护、SQL注入防护等安全措施。文档还规定了密码强度要求、会话管理策略、日志审计规范等。所有开发人员必须遵循本规范进行开发，确保系统和用户数据的安全。'
    },
    {
      id: 11,
      title: '性能优化指南',
      description: '前端和后端性能优化的最佳实践',
      type: 'document',
      format: 'PDF',
      size: '1.9 MB',
      author: '孙七',
      createdAt: '2024-01-16',
      lastModified: '2024-01-23',
      version: 'v1.4',
      category: '技术文档',
      language: '中文',
      pages: 38,
      downloads: 95,
      views: 367,
      tags: ['性能', '优化', '前端', '后端'],
      thumbnail: '/images/thumbnails/performance.svg',
      content: '性能优化指南总结了智汇宝项目的性能优化经验。前端优化包括代码分割、懒加载、图片优化、缓存策略等。后端优化包括数据库查询优化、接口响应时间优化、并发处理等。文档还介绍了性能监控工具的使用、性能指标的定义和性能测试方法。通过这些优化措施，系统的加载速度和响应速度都得到了显著提升。'
    },
    {
      id: 12,
      title: '测试规范文档',
      description: '单元测试、集成测试和E2E测试规范',
      type: 'document',
      format: 'PDF',
      size: '1.7 MB',
      author: '周八',
      createdAt: '2024-01-14',
      lastModified: '2024-01-21',
      version: 'v1.6',
      category: '技术文档',
      language: '中文',
      pages: 35,
      downloads: 82,
      views: 298,
      tags: ['测试', '规范', '质量保证', '技术'],
      thumbnail: '/images/thumbnails/testing.svg',
      content: '测试规范文档定义了智汇宝项目的测试标准和流程。前端使用Jest和React Testing Library进行单元测试，使用Cypress进行E2E测试。后端使用Mocha和Chai进行单元测试和集成测试。文档规定了测试覆盖率要求、测试用例编写规范、Mock数据使用方法等。所有新功能必须编写相应的测试用例，确保代码质量。'
    }
  ]

  useEffect(() => {
    // 模拟API调用
    const fetchResource = async () => {
      setLoading(true)
      // 模拟网络延迟
      await new Promise(resolve => setTimeout(resolve, 500))
      
      const foundResource = resources.find(r => r.id === parseInt(id))
      if (foundResource) {
        setResource(foundResource)
        // 增加浏览次数
        foundResource.views += 1
      }
      setLoading(false)
    }

    fetchResource()
  }, [id])

  const getTypeIcon = (type) => {
    switch (type) {
      case 'document': return FileText
      case 'image': return Image
      case 'video': return Video
      case 'audio': return Music
      default: return Archive
    }
  }

  const handleDownload = () => {
    // 模拟下载
    console.log('下载资源:', resource.title)
    resource.downloads += 1
  }

  const handleShare = () => {
    // 模拟分享
    console.log('分享资源:', resource.title)
  }

  const handleEdit = () => {
    // 模拟编辑
    console.log('编辑资源:', resource.title)
  }

  const handleDelete = () => {
    // 模拟删除
    if (window.confirm('确定要删除这个资源吗？')) {
      console.log('删除资源:', resource.title)
      navigate('/resource-library')
    }
  }

  if (loading) {
    return (
      <div className="resource-detail">
        <div className="detail-header">
          <div className="loading-skeleton">
            <div className="skeleton-line skeleton-title"></div>
            <div className="skeleton-line skeleton-subtitle"></div>
          </div>
        </div>
        <div className="detail-content">
          <div className="loading-skeleton">
            <div className="skeleton-line skeleton-content"></div>
            <div className="skeleton-line skeleton-content"></div>
            <div className="skeleton-line skeleton-content"></div>
          </div>
        </div>
      </div>
    )
  }

  if (!resource) {
    return (
      <div className="resource-detail">
        <div className="detail-header">
          <div className="header-content">
            <button className="back-btn icon-only" onClick={() => navigate('/resource-library')} title="返回资源库">
              <ArrowLeft size={22} />
            </button>
          </div>
        </div>
        <div className="detail-content">
          <div className="not-found">
            <Archive size={64} />
            <h3>资源不存在</h3>
            <p>未找到指定的资源</p>
            <button className="back-btn primary" onClick={() => navigate('/resource-library')}>
              返回资源库
            </button>
          </div>
        </div>
      </div>
    )
  }

  const TypeIcon = getTypeIcon(resource.type)

  return (
    <div className="resource-detail">
      <div className="detail-header">
        <div className="header-content">
          <button className="back-btn icon-only" onClick={() => navigate('/resource-library')} title="返回资源库">
            <ArrowLeft size={22} />
          </button>

          <div className="resource-title-section">
            <div className="title-row">
              <h1 className="resource-title">{resource.title}</h1>
              <div className="resource-format-badge">
                <TypeIcon size={20} />
                <span>{resource.format}</span>
              </div>
            </div>
            <p className="resource-description">{resource.description}</p>
          </div>

          <div className="header-actions">
            <button className="action-btn primary" onClick={handleDownload}>
              <Download size={20} />
              下载
            </button>
            <button className="action-btn" onClick={handleShare}>
              <Share2 size={20} />
              分享
            </button>
            <button className="action-btn" onClick={handleEdit}>
              <Edit size={20} />
              编辑
            </button>
            <button className="action-btn danger" onClick={handleDelete}>
              <Trash2 size={20} />
              删除
            </button>
          </div>
        </div>
      </div>

      <div className="detail-content">
        <div className="content-main">
          <div className="preview-section">
            <div className="preview-header">
              <h3>资源预览</h3>
              <div className="preview-actions">
                <button className="preview-btn">
                  <ExternalLink size={18} />
                  在新窗口打开
                </button>
              </div>
            </div>
            <div className="preview-content">
              <img src={resource.thumbnail} alt={resource.title} className="preview-image" />
            </div>
          </div>

          <div className="info-content-section">
            <div className="info-grid">
              <div className="info-item">
                <div className="info-label">
                  <FileText size={16} />
                  文件类型
                </div>
                <div className="info-value">{resource.format}</div>
              </div>
              <div className="info-item">
                <div className="info-label">
                  <HardDrive size={16} />
                  文件大小
                </div>
                <div className="info-value">{resource.size}</div>
              </div>
              <div className="info-item">
                <div className="info-label">
                  <User size={16} />
                  作者
                </div>
                <div className="info-value">{resource.author}</div>
              </div>
              <div className="info-item">
                <div className="info-label">
                  <Calendar size={16} />
                  创建时间
                </div>
                <div className="info-value">{resource.createdAt}</div>
              </div>
              <div className="info-item">
                <div className="info-label">
                  <Clock size={16} />
                  最后修改
                </div>
                <div className="info-value">{resource.lastModified}</div>
              </div>
              <div className="info-item">
                <div className="info-label">
                  <Tag size={16} />
                  版本
                </div>
                <div className="info-value">{resource.version}</div>
              </div>
              <div className="info-item">
                <div className="info-label">
                  <Archive size={16} />
                  分类
                </div>
                <div className="info-value">{resource.category}</div>
              </div>
              <div className="info-item">
                <div className="info-label">
                  <FileText size={16} />
                  语言
                </div>
                <div className="info-value">{resource.language}</div>
              </div>
              {resource.pages && (
                <div className="info-item">
                  <div className="info-label">
                    <FileText size={16} />
                    页数
                  </div>
                  <div className="info-value">{resource.pages} 页</div>
                </div>
              )}
              {resource.duration && (
                <div className="info-item">
                  <div className="info-label">
                    <Clock size={16} />
                    时长
                  </div>
                  <div className="info-value">{resource.duration}</div>
                </div>
              )}
            </div>

            <div className="content-divider"></div>

            <div className="content-text">
              <p>{resource.content}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ResourceDetail
